<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增jingfang')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-editable-css" />
</head>
<body class="hold-transition box box-main">
    <input id="config" name="config" type="hidden"/>
    <form class="form-horizontal m" id="form-yian-add">
        <div class="form-group">
            <label class="col-sm-2 control-label">药名：</label>
            <div class="col-sm-3">
                <input name="key" class="form-control" type="text" id="aa">
            </div>
            <label class="col-sm-2 control-label">用量：</label>
            <div class="col-sm-3">
                <input name="value" class="form-control" type="text">
            </div>
            <button type="button" class="btn btn-primary btn-sm" onclick="insertRow()">增加</button>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <input type="hidden" name="config" class="form-control">
            <table id="bootstrap-table"></table>
        </div>
    </form>

</div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: bootstrap-table-editable-js" />
    <script th:inline="javascript">
        var prefix = ctx + "zy/jingfang"
        $("#form-config-add").validate({
            focusCleanup: true
        });


        var tempData = window.parent.localStorage.getItem('tempData');
        $("input[name='config']").attr({ value :tempData});
        var tempObject;
        if(tempData.length>0){
            tempObject= JSON.parse(tempData);
        }else{
            tempObject=[];
        }



        $(function() {
            var options = {
                data:tempObject,
                modalName: "jingfang",
                showSearch:false,
                showToggle:false,
                showColumns:false,
                showFooter:true,
                showRefresh:false,
                showPageGo: true,
                pagination:false,
                pageSize: 50,
                uniqueId: "key",
                columns: [
                    {
                        field: 'key',
                        title: '药名',
                        editable: true
                    },
                    {
                        field: 'value',
                        title: '用量',
                        editable : {
                            type : 'text',
                            title : '名称',
                            emptytext : "用量为空",
                            validate : function(value) {
                                if (value.length == 0) {
                                    return '名称不能为空';
                                }
                            }
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="deleteRow(\'' + row.key + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });

        /* 新增表格行 */
        function insertRow(){
            var data = $("#" + table.options.id).bootstrapTable('getData');
            var key=$("input[name='key']").val();
            var isHaveItem=false;
            // 使用each()方法遍历JSON数组
            $.each(data, function(index, item) {
                if(item.key==key){
                    isHaveItem=true;
                    return;
                }
            });

            if(isHaveItem){
                $.modal.msgError("此药已经存在,请核实配方")
                return;
            }

            $("#" + table.options.id).bootstrapTable('insertRow', {
                index:  $("#" + table.options.id).bootstrapTable('getData').length,
                row: {
                    key:$("input[name='key']").val(),
                    value:$("input[name='value']").val()
                }
            })

        }

        /* 删除表格行 */
        function deleteRow(index){
            $("#" + table.options.id).bootstrapTable('removeByUniqueId', index)
        }

        /* (回调形式-父页面调用子页面) */
        function getConfig() {
            var data = $("#" + table.options.id).bootstrapTable('getData');
            return JSON.stringify(data);
        }

    </script>
</body>
</html>